<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>用户退款申请</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

	<!-- 自动查找引入进来的工具类脚本。 -->
	<link rel="stylesheet" href="./layui/css/layui.css"  media="all">
</head>
<body>
<!-- 抬头 -->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
	<legend>用户退款申请</legend>
</fieldset>
<!-- 用户信息栏 -->
<ul class="layui-nav">
<li class="layui-nav-item" lay-unselect="">
	<!-- <a href="javascript:;">当前账号
		<img src="//t.cn/RCzsdCq" class="layui-nav-img"></img>
	</a> -->
	<label class="layui-form-label" style="padding:7.5px 0px;">当前账号</label>
	<label class="layui-form-label" id='userID' style="padding:7.5px 0px;"></label>
</li>
<li class="layui-nav-item" lay-unselect="">
		<a href="javascript:void(0)" onclick="gotoPlaceOrder();" target='topFrame'>[用户充值下单系统]</a>
</li>
</ul>
<!-- 列表栏 -->
<form onsubmit="return false;" class="layui-form layui-form-pane" action="" lay-filter="example">
	<div class="layui-form-item">
		<label class="layui-form-label" style="padding:7.5px 0px;">账户余额</label>
		<label class="layui-form-label" id='balance' style="padding:7.5px 0px;"></label>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">退款金额</label>
		<div class="layui-input-inline">
			<input type="text" name="input_amount" id="input_amount" placeholder="请输入" autocomplete="off" 
			class="layui-input" value="" onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')" 
			oninput="if(value.length>5)value=value.slice(0,5)"
			onchange="myFunction()" lay-verify="required">
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">手续费</label>
		<label class="layui-form-label" name='actual_poundage' id='actual_poundage'></label>
		<div class="layui-form-mid layui-word-aux">手续费0.5%</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">实收退款</label>
		<label class="layui-form-label" id='actual_amount'></label>
	</div>

	<div class="layui-form-item" pane="">
		<label class="layui-form-label">收款类型</label>
		<div class="layui-input-block">
			<input type="radio" name="type" value="支付宝" title="支付宝" checked="">
			<input type="radio" name="type" value="微信" title="微信">
			<input type="radio" name="type" value="银行卡" title="银行卡">
		</div>
	</div>

	<div class="layui-form-item">
	<label class="layui-form-label">收款账号</label>
	<div class="layui-input-inline">
			<input type="text" name="accountID" lay-verify="required" 
			placeholder="请填写正确账号确保到账" autocomplete="off" class="layui-input">
	</div>
	</div>

	<div class="layui-form-item">
	<label class="layui-form-label">二级密码</label>
	<div class="layui-input-inline">
		<input type="password" name="password" lay-verify="required" 
		placeholder="输入二级密码以保障交易安全" autocomplete="off" class="layui-input">
	</div>
	</div>
	<div class="layui-form-mid layui-word-aux">银行卡收款请与客服核对收款人信息</div>

	<!-- 提交和重置 -->
	<div class="layui-form-item">
	<div class="layui-input-block">
		<button class="layui-btn" lay-submit="" lay-filter="formDemo">申请退款</button>
		<button type="reset" class="layui-btn layui-btn-primary">重新选择</button>
	</div>
	</div>
</form>

<!-- 分割线 -->
<hr class="layui-bg-orange">

<!-- 自动查找引入进来的工具类脚本。 -->
<script src="./layui/layui.js" charset="utf-8"></script>

<script>
layui.config({
	version: true
}).use(['form','layer','layedit','jquery','mobile'], function(){
	var ws = new WebSocket("ws://192.168.1.116:8080");
	// 连接成功
	ws.onopen = function (e) {
		console.log('连接成功获取到的上半段脚本定义的用户id和客服id=',selfid);
		ws.send(JSON.stringify({
			type: 'REGISTER', 	// 随便定义，用于在服务端区分消息类型
			selfid: selfid,		// 写入自身id
		})); 
	}
	// 连接关闭
	// ws.onclose = function (e) {
	// 	console.log('连接关闭');
	// }
	var mobile = layui.mobile;
		form = layui.form;
        layer = layui.layer,
		$= layui.jquery;
	document.getElementById('userID').innerHTML = selfid;

	var _cur_Money = 0;
	var _input_amount = 0;
	var _actual_poundage = 0;
	var _actual_amount = 0;
	var _radioVal = '支付宝';

	
	var data_index = {"id":selfid};
	$.post("/user_data",data_index,function(result){
		if(result.status == "success"){
			layer.msg('成功打开订单数据');	// 弹出提示
			// _cur_Money = result.user_data[0].money;
			_cur_Money = 100;
			document.getElementById('balance').innerHTML = '￥'+ _cur_Money;
			console.log(result.user_data,result.user_data[0].money,'有数据吗');
		}
		else{
			layer.msg("错误信息:"+result.user_data);
		}
	});

	// 侦听单选框事件(收款类型)
	form.on('radio',function(data){
		// console.log(data.elem,'得到radio原始DOM对象');
		// console.log(data.value,'被点击的radio的value值');
		if(data.value == '支付宝'){
			_radioVal = '支付宝';
		}else if (data.value == '微信') {
			_radioVal = '微信';
		}else if (data.value == '银行卡') {
			_radioVal = '银行卡';
		}
	});
	
	// 侦听输入金额事件
	$("#input_amount").bind('input propertychange', function () {
		var a = $("#input_amount").val();
		if(_cur_Money < 100) {
			console.log(_cur_Money,'111111111111');
			var errMsg = "您的账户余额小于100,请重新输入!";
			layer.alert(errMsg,{
				skin: 'layui-layer-molv',
				closeBtn: 0
			},function(){
				window.parent.location.reload();    // 刷新父类页面
				parent.layer.close(index);          // 关闭当前的弹窗
			});
		}else if(a < 100) {
			console.log(_cur_Money,'22222222222222');
			a = 100;
			var b = (a * 0.005).toFixed(2);
			document.getElementById('input_amount').innerHTML = a;
			document.getElementById('actual_poundage').innerHTML = '￥'+ b;
			document.getElementById('actual_amount').innerHTML = '￥'+ (a - b);
			_input_amount = a;
			_actual_poundage = b;
			_actual_amount = _input_amount - _actual_poundage;
		}else {
			console.log(_cur_Money,'3333333333333333');
			var b = (a * 0.005).toFixed(2);
			document.getElementById('input_amount').innerHTML = a;
			document.getElementById('actual_poundage').innerHTML = '￥'+ b;
			document.getElementById('actual_amount').innerHTML = '￥'+ (a - b);
			_input_amount = a;
			_actual_poundage = b;
			_actual_amount = _input_amount - _actual_poundage;
		}
	});

    // 监听申请退款
    form.on('submit(formDemo)', function(data){
		data.field.id = selfid.toString();
		data.field.money1 = _input_amount.toString();
		data.field.money2 = _actual_poundage.toString();
		data.field.money3 = _actual_amount.toString();
		data.field.radioVal = _radioVal.toString();
		data.field.cur_Money = _cur_Money.toString();
		console.log("返回的结果是啥啊",data.field,_input_amount,_actual_amount);
		$.post("/passwordCheck",data.field,function(result){
            if(result.status == "fail"){
                layer.alert(JSON.stringify(result.msg),{
					skin: 'layui-layer-molv',
					closeBtn: 0
				},function(){
                    window.parent.location.reload();    // 刷新父类页面
                    parent.layer.close(index);          // 关闭当前的弹窗
                });
                console.log("密码错误",result);
            }else {
				// var neirong = {
				// 	"用户ID"	: data.field.id,
				// 	"退款金额"	: data.field.money1,
				// 	"实际退款金额": data.field.money3,
				// 	"收款类型"	: data.field.radioVal,
				// 	"收款账号"	:	data.field.accountID,
				// }
                // layer.alert(JSON.stringify(neirong),{
				// 	skin: 'layui-layer-molv',
				// 	closeBtn: 0,
				// 	yes:function(){
				//     	layer.msg("要去找客服");
				//   	}
				// });
				layer.open({
					content: "用户ID："+data.field.id+
							"<br>退款金额："+data.field.money1+
							"<br>实际退款金额："+data.field.money3+
							"<br>收款类型："+data.field.radioVal+
							"<br>收款账号："+data.field.accountID+
							"<br>业务类型："+"退款"+
							"<br>下单时间"+result.time,
					shade:[0.8, '#393D49'],
					closeBtn: 0,
					yes:function(){
				    	layer.msg("要去找客服");
				  	}
				}); 
            }
        })
        return false;
	});
});
function gotoPlaceOrder(){
	console.log('点击返回用户充值下单页面');
	location.href="/?selfid="+selfid;
};
// 输入金额小于100时触发
function myFunction(){
	var x = document.getElementById("input_amount");
	if(x.value < 100) {
		x.value = 100;
		var y = (x.value * 0.005).toFixed(2);
		document.getElementById('actual_poundage').innerHTML = '￥'+ y;
		document.getElementById('actual_amount').innerHTML = '￥'+ (x.value - y);
	}
}
</script>
</body>
</html>
